<template>
	<view class="merch-cond-info">
		<view class="merch-cond-info-title">
			该数值为我的及整个团队的商户数和值
		</view>
		<view class="merch-cond-info-total">
			<view class="left">共计
				<text class="number">2</text>个结果
			</view>
			<view class="right">
				<view class="name" @click="isMerch=true">
					<text>全部商户</text>
					<u-icon name="arrow-down-fill" color="#AAAAAA" size="16" class="icon"></u-icon>
				</view>
				<view class="name" @click="isScreen=true">
					<text>筛选</text>
					<u-icon name="arrow-down-fill" color="#AAAAAA" size="16" class="icon"></u-icon>
				</view>
			</view>
		</view>
		<view class="merch-cond-info-box">
			<view class="item" v-for="(item,index) in list" :key="index" @click="itemHandel(index)">
				<view class="title">
					<text class="name">{{item.name}}</text>
					<u-icon name="arrow-right" color="#AAAAAA" size="26" class="icon"></u-icon>
				</view>
				<view class="content">商户号:410081605242365</view>
				<view class="content">终端号:208100047000045509281</view>
				<view class="content">达标等级：1</view>
				<view class="content">产品政策：政策C版</view>
			</view>
		</view>

		<u-popup v-model="isScreen" mode="bottom" border-radius="14">
			<view class="search-box">
				<view class="title">选择筛选条件</view>
				<view>达标截止日期</view>
				<view class="open-time">
					<view class="open-time-box">
						<u-icon name="calendar" color="#AAAAAA" size="32" class="icon"></u-icon>
						<u-field v-model="queryParams.startDate" label-width="0" :disabled="true" clickable
							name="datetimePicker" placeholder="请选择开始日期" @click="fieldTimeHandle(1)" />
					</view>
					<view class="open-time-box">
						<u-icon name="calendar" color="#AAAAAA" size="32" class="icon"></u-icon>
						<u-field v-model="queryParams.endDate" label-width="0" :disabled="true" clickable
							name="datetimePicker" placeholder="请选择结束日期" @click="fieldTimeHandle(2)" />
					</view>
				</view>
				<view>达标时间</view>
				<view class="open-time">
					<view class="open-time-box">
						<u-icon name="calendar" color="#AAAAAA" size="32" class="icon"></u-icon>
						<u-field v-model="queryParams.startDate2" label-width="0" :disabled="true" clickable
							name="datetimePicker" placeholder="请选择开始日期" @click="fieldTimeHandle(3)" />
					</view>
					<view class="open-time-box">
						<u-icon name="calendar" color="#AAAAAA" size="32" class="icon"></u-icon>
						<u-field v-model="queryParams.endDate2" label-width="0" :disabled="true" clickable
							name="datetimePicker" placeholder="请选择结束日期" @click="fieldTimeHandle(4)" />
					</view>
				</view>
				<u-field label-width="180" v-model="queryParams.agentNo" label="商户" placeholder="请输入商户"></u-field>
				<u-field label-width="180" v-model="queryParams.agentName" label="机具号" placeholder="请输入机具号">
				</u-field>
				<u-field label-width="180" v-model="shareSettleName" label="档位" placeholder="请选择档位" @click="isGear=true"
					right-icon="arrow-down-fill"></u-field>

				<view class="gear-name">当前档位
					<text class="number">88</text>
				</view>
				<view class="bottom-btn">
					<view class="right right-btn btn" @click="resetHandel">重置</view>
					<view class="btn">
						<u-button class="right right-btn" shape="circle" hover-class="none" @click="determineHandel">完成
						</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-picker mode="time" v-model="showPicker" title="选择年月日" @confirm="pickerConfirmHandle"
			@cancel="showPicker = false" />
		<u-select v-model="isGear" :list="gearOptions" label-name="dictLabel" value-name="dictValue"
			@confirm="confirmGear"></u-select>
		<u-popup v-model="isMerch" mode="bottom" border-radius="14" :closeable="true">
			<view class="merch-box">
				<view class="title">全部商户</view>
				<view class="item" v-for="(item, index) in radiolist" :key="index" @click="merchHandler(index)">
					<view class="left">
						<image class="image" src="@/common/images/merch/left.png" mode=""></image>
						<text>{{item.name}}</text>
					</view>
					<view :class="['right',{'active':merchIndex==index}]">
						<text v-if="merchIndex==index">√</text>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		getFormDate
	} from "_c/utils/date";
	export default {
		data() {
			return {
				isScreen: false,
				isMerch: false,
				list: [],
				queryParams: {},
				tradTimeType: 1,
				shareSettleName: "",
				showPicker: false,
				gearOptions: [{
					dictLabel: "1",
					dictValue: "0"
				}, {
					dictLabel: "2",
					dictValue: "1"
				}],
				isGear: false,
				number: 55,
				radiolist: [{
						name: '全部商户',
						value: 0,
					},
					{
						name: '我的商户',
						value: 1,
					},
					{
						name: '团队商户',
						value: 2,
					}
				],
				radiovalue1: "",
				merchIndex: 0,
				list: [{
						name: "OCEANSIDE",
					},
					{
						name: "OCEANSIDE",
					}
				]
			};
		},
		created() {},
		methods: {
			// 日期选择
			fieldTimeHandle(type) {
				this.tradTimeType = type;
				this.showPicker = true;
			},
			// 日期确认
			pickerConfirmHandle(value) {
				switch (Number(this.tradTimeType)) {
					case 1:
						this.queryParams.startDate = getFormDate(value);
						break;
					case 2:
						this.queryParams.endDate = getFormDate(value);
						break;
					case 3:
						this.queryParams.startDate2 = getFormDate(value);
						break;
					case 4:
						this.queryParams.endDate2 = getFormDate(value);
						break;
					default:
						break;
				}
				this.showPicker = false;
			},
			// 档位确认
			confirmGear(e) {},
			// 重置
			resetHandel() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
				};
				this.shareSettleName = "";
			},
			// 搜索确定
			determineHandel() {
				console.log(1, this.queryParams)
				this.isScreen = false;
			},
			// 商户选择
			merchHandler(index) {
				this.merchIndex = index;
			},
			// 单条数据跳转
			itemHandel(index) {
				this.$nav.push({
					path: '/pages/home/data/merch-cond-list',
					query: {
						index
					}
				})
			}
		},
	};
</script>
<style scoped lang='scss'>
	.merch-cond-info {
		background-color: #FFFFFF;
		border-radius: R(10);
		margin: R(20);
		padding: R(30);

		&-title {
			color: #BB7949;
			background-color: #FFF4EC;
			border-radius: R(10);
			padding: R(30) R(20);
		}

		&-total {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: R(20) 0;
			color: #8C8C8C;

			.left {
				.number {
					color: #4286F5;
				}
			}

			.right {
				display: flex;

				.name {
					margin-left: R(20);
				}
			}
		}

		&-box {
			.item {
				margin: R(40) 0;

				.title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: R(20) 0 R(10) 0;

					.name {
						font-size: R(30);
						font-weight: 600;
					}
				}

				.content {
					margin: R(10) 0;
					color: #666666;
				}

			}
		}


		.search-box {
			margin: R(30);

			.title {
				text-align: center;
				font-weight: 400;
				font-size: R(30);
			}

			.open-time {
				display: flex;
				justify-content: space-between;

				&-box {
					display: flex;
				}
			}

			.gear-name {
				margin-left: R(20);

				.number {
					margin-left: R(50);
					color: #4286F5;
				}
			}

			.bottom-btn {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: R(30) 0;
				border-top: 1px solid #efefef;
				padding: R(10) 0;

				.btn {
					text-align: center;
					line-height: R(50);
				}
			}
		}

		.merch-box {
			padding: R(40);
			font-size: R(30);

			.title {
				text-align: center;
				margin: R(30) 0;
			}

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: R(20) 0;
				border-bottom: 1px solid #EEEEEE;
				padding: R(20) 0;

				.image {
					width: R(40);
					height: R(40);
					margin: 0 R(20);
				}

				.right {
					border: 1px solid #dddddd;
					border-radius: 50%;
					width: R(40);
					height: R(40);
					line-height: R(40);
					text-align: center;
					font-size: R(30);
					font-weight: 400;
				}

				.active {
					background-color: #007AFF;
					color: #FFFFFF;
				}

				&:last-child {
					border-bottom: 0;
				}
			}
		}
	}
</style>
